<!DOCTYPE html>
<html lang="en">
<head>
  <title>v-charts</title>
  <meta charset="UTF-8"/>
</head>
<body>
  <div id="app" style="width: 50%;">
    <h2>折线图(带边框、可切换、可下载)</h2><ve-line :data="chartData" :grid="grid" :toolbox="toolbox"></ve-line><hr />
    <h2>饼图</h2><ve-pie :data="chartData" :loading="loading"></ve-pie><hr />
    <h2>环形图</h2><ve-ring :data="chartData"></ve-ring><hr />
    <h2>柱状图</h2><ve-histogram :data="simpleLineData" :grid="grid"></ve-histogram><hr />
    <h2>仪表盘</h2><ve-gauge :data="gaugeData" :settings="chartSettings"></ve-gauge><hr />
    
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
  <script>
    new Vue({
      el: '#app',
      data: function () {
        this.chartSettings ={
        	labelMap: {
	          'speed': '速度'
	        },
	        dataName: {
	          'speed': 'km/h'
	        }
        }
        this.grid={
        	show:true,
        	borderColor:'#ccc',
        }
        this.toolbox={
        	feature: {
	          magicType: {type: ['line', 'bar']},
	          saveAsImage: {}
	        }
        }
        return {
	        loading: true,
	        chartData: {
	            columns: ['日期', '销售额'],
	            rows: [
	              { '日期': '1月1日', '销售额': 2143 },
	              { '日期': '1月2日', '销售额': 1223 },
	              { '日期': '1月3日', '销售额': 2123 },
	              { '日期': '1月4日', '销售额': 4123 },
	              { '日期': '1月5日', '销售额': 3123 },
	              { '日期': '1月6日', '销售额': 7123 }
	            ]
	        },
			simpleLineData:{
	          columns: ['日期', '访问用户', '下单用户', '下单率'],
	          rows: [
	            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
	            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
	            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
	            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
	            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 323 },
	            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
	          ]
			},
			gaugeData: {
	          columns: ['type', 'value'],
	          rows: [
	            { type: 'speed', value: 60 }
	          ]
	       },
	      
        }
      }
    })
  </script>
</body>
</html>